<script setup>
	import { onMounted, ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const todaySign = ref(false)
	const totalSignDays = ref(0)
	async function getSignDays() {
		const res = await http.request({
			url: '/api/index/signLog',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			totalSignDays.value = res.data.data.length
			//过滤签到的日期
			calenderArr.value.forEach((date) => {
				res.data.data.forEach((item) => {
					let day = parseTime(item.date, '{y}-{m}-{d}').split('-')
					if (day[2][0] == 0) {
						if (date.day == day[2][1]) {
							date.ifSign = true
						}
						if (nowDay.value == day[2][1]) {
							todaySign.value = true
						}
					} else {
						if (date.day == day[2]) {
							date.ifSign = true
						}
						if (nowDay.value == day[2]) {
							todaySign.value = true
						}
					}
				})
			})
		}
	}

	const calenderArr = ref([])
	// 今天
	const nowDate = ref(new Date())
	// 年
	const year = ref(nowDate.value.getFullYear())
	// 月
	const mounth = ref(nowDate.value.getMonth() + 1)
	// 今天
	const nowDay = ref(nowDate.value.getDate())
	// 这个月多少天
	const totalDay = ref(new Date(year.value, mounth.value, 0).getDate())
	// 当月第一天周几
	const firstWeek = ref(new Date(`${year.value}/${mounth.value}/1`).getDay())
	// 当月最后一天周几
	const lastWeek = ref(
		new Date(`${year.value}/${mounth.value}/${totalDay.value}`).getDay()
	)

	//当月日历数据
	function setCalender() {
		for (let i = 0; i < totalDay.value; i++) {
			let day = {
				day: i + 1,
				today: false,
				ifSign: false,
				isShow: true,
			}
			if (i + 1 == nowDay.value) {
				day.today = true
				calenderArr.value.push(day)
			} else {
				calenderArr.value.push(day)
			}
		}
		//补齐头部空位
		supplementStart()
		supplementEnd()
		console.log(calenderArr.value)
	}

	// 补齐头部空位
	function supplementStart() {
		let day = {
			day: 0,
			today: false,
			ifSign: false,
			isShow: false,
		}
		console.log('f');
		// console.log(nowDate.value);
		// console.log(year.value);
		// console.log(mounth.value);
		// console.log(nowDay.value);
		// console.log(totalDay.value);
		console.log(firstWeek.value);
		console.log(lastWeek.value);
		if (firstWeek.value == 0) {
			for (let i = 0; i < 6; i++) {
				calenderArr.value.unshift(day)
			}
		} else if (firstWeek.value != 0 && firstWeek.value != 1) {
			for (let i = 0; i < firstWeek.value - 1; i++) {
				calenderArr.value.unshift(day)
			}
		}
	}
	// 补齐尾部
	function supplementEnd() {
		let day = {
			day: 0,
			today: false,
			ifSign: false,
			isShow: false,
		}
		if (lastWeek.value != 0) {
			for (let i = 0; i < 7 - lastWeek.value; i++) {
				calenderArr.value.push(day)
			}
		}
	}

	//签到
	const signpopup = ref()

	async function signToday() {
		const res = await http.request({
			url: '/api/index/signPost',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			getSignDays()
			signpopup.value.open('center')
		} else {
			uni.utils.toast('签到失败')
		}
	}

	function closePOP() {
		signpopup.value.close('center')
	}

	onMounted(() => {
		setCalender()
		getSignDays()
	})
</script>

<template>
	<view class="sign-content">
		<view class="calender">
			<view class="calender-top">
				<view class="total-sign">
					<text>已累计签到</text>
					<text class="num">{{ totalSignDays }}</text>
					<text>天</text>
				</view>
				<view
					class="sign-button"
					style="background-color: #e4e3e8"
					v-if="todaySign"
				>
					已签到
				</view>
				<view class="sign-button" @click="signToday" v-else>
					立即签到
				</view>
			</view>
			<view class="calender-title">
				{{ `${year}年${mounth}月` }}
			</view>
			<view class="week">
				<view class="week-item"> 一 </view>
				<view class="week-item"> 二 </view>
				<view class="week-item"> 三 </view>
				<view class="week-item"> 四 </view>
				<view class="week-item"> 五 </view>
				<view class="week-item"> 六 </view>
				<view class="week-item"> 日 </view>
			</view>
			<view class="mounth-day">
				<view
					class="mounth-day-item"
					:class="{ show: !item.isShow }"
					v-for="(item, index) in calenderArr"
					:key="index"
				>
					<view class="icon" :class="{ 'icon-active': item.ifSign }">
						<image
							src="../../static/point.png"
							style="width: 50rpx; height: 50rpx"
							mode=""
						></image>
						<view v-if="item.ifSign">
							<image
								src="../../static/checked.png"
								style="width: 25rpx; height: 20rpx"
								mode=""
							></image>
						</view>
						<view class="get-point" v-else> +5 </view>
					</view>
					<view
						class="mounth-one-day"
						style="color: #7863ff"
						v-if="item.today"
					>
						今天
					</view>
					<view class="mounth-one-day" v-else>
						{{ `${mounth}.${item.day}` }}
					</view>
				</view>
			</view>
		</view>

		<!-- 签到出层 -->
		<uni-popup ref="signpopup" type="center">
			<view class="signpopup-content">
				<view class="top-detail">
					<view class="" style="font-size: 48rpx"> 签到成功 </view>
					<view
						class=""
						style="
							margin: 10rpx 0 27rpx 0;
							font-size: 40rpx;
							color: #f0452a;
						"
					>
						<text>+5</text
						><text style="margin-left: 14rpx; font-size: 28rpx"
							>积分</text
						>
					</view>
					<view class="take" @click="closePOP"> 开心收下 </view>
				</view>
				<view class="sign-close" @click="closePOP"> </view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.sign-content {
		padding: 20rpx;

		.calender {
			padding-bottom: 50rpx;
			box-sizing: border-box;
			border-radius: 26rpx;
			box-shadow: 0px 0px 40px 0px rgba(120, 99, 255, 0.1);

			.calender-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 110rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				border-bottom: 4rpx solid #f5f5f5;

				.total-sign {
					font-size: 32rpx;

					.num {
						color: $all-color;
					}
				}

				.sign-button {
					width: 142rpx;
					height: 52rpx;
					border-radius: 26rpx;
					background-color: $all-color;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 52rpx;
				}
			}

			.calender-title {
				padding: 32rpx 40rpx;
				font-size: 32rpx;
			}

			.week {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx;

				.week-item {
					width: 14%;
					margin-bottom: 26rpx;
					box-sizing: border-box;
					font-size: 22rpx;
					color: #767676;
					text-align: center;
				}
			}

			.mounth-day {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 0 40rpx;

				.mounth-day-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 14%;
					margin: 0 auto;

					&:nth-child(7n) {
						margin-right: 0;
					}

					.icon {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 74rpx;
						height: 112rpx;
						padding-bottom: 10rpx;
						box-sizing: border-box;
						border-radius: 6rpx;
						background-color: #f5f4fa;

						.get-point {
							font-size: 24rpx;
							color: #b2b2b2;
						}
					}

					.icon-active {
						background-color: #eeecfc;
						border: 2rpx solid $all-color;
					}

					.mounth-one-day {
						margin: 21rpx 0;
						font-size: 22rpx;
						color: #767676;
					}
				}

				.show {
					opacity: 0;
				}
			}
		}

		.signpopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 552rpx;

			.top-detail {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 552rpx;
				height: 700rpx;
				padding-top: 378rpx;
				box-sizing: border-box;
				background: url('https://ojqn.wm2177.com/wechat_imgs/sign-bg.png')
					no-repeat;
				background-size: contain;

				.take {
					width: 408rpx;
					height: 88rpx;
					background-color: $all-color;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 36rpx;
					color: #fff;
				}
			}

			.sign-close {
				width: 70rpx;
				height: 70rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/sign-close.png')
					no-repeat;
				background-size: contain;
			}
		}
	}
</style>
